﻿function drawCircle(ctx) {
    var data = [90, 50, 50, 50, 50, 90];
    var colors = ['#3d7ef9', '#CCCCFF', '#FF6666', '#ff00ff', '#99CC66', '#FFFF66'];
    var sum = 0;
    for (var i = 0, len = data.length; i < len; i++) {
        sum += data[i];
    }

    var screen_w = 272;                                 //画布宽度        
    var point = { x: screen_w / 2, y: screen_w / 2 };   //圆心        
    var rudius = screen_w / 2;                          //半径        
    var start = -90;                                    //起始角度

    for (var j = 0, length = data.length; j < length; j++) {
        var stop = start + data[j] / sum * 360;                 //终止角度
        ctx.moveTo(point.x, point.y);                           //移至圆心
        ctx.arc(point.x, point.y, rudius, rudius, start, stop); //指定圆弧圆心、半径、起始角度、终止角度
        ctx.setFillStyle(colors[j]);                            //设置填充颜色
        ctx.fill();                                             //填充区域
        start = stop;//将上一个圆弧的终止角度做为下一个圆弧的起始角度
    }
    ctx.draw(); //绘制图形
}

var page = {
    timer: 0,
    citys: [
        { provincial: '四川省', capital: '麻辣香锅' },
        { provincial: '河北省', capital: '锅包肘子' },
        { provincial: '辽宁省', capital: '锅包肉' },
        { provincial: '吉林省', capital: '鸭腰烧口蘑' },
        { provincial: '黑龙江省', capital: '莫利炖鱼' },
        { provincial: '江苏省', capital: '鸭血粉丝' },
        { provincial: '安徽省', capital: '黄山炖鸽' },
        { provincial: '福建省', capital: '闽南炣廋肉' },
        { provincial: '江西省', capital: '四星望月' },
    ],
    /* 此方法在第一次显示窗体前发生 */
    onLoad: function (event) {
        /*-----------------------panel1--------------------*/
        this.setData({
            Clock1: {
                hour: { x: 7, y: 53 },
                minute: { x: 5, y: 64 },
                second: { x: 3, y: 77 },
            }
        })

        var that = this;
        var sec = 0;
        this.timer = setInterval(function () {
            that.setData({ Clock1: { value: sec++ } })
        }, 20);

        /*-----------------------panel2--------------------*/
        var array = [];
        for (var i = 0, len = this.citys.length; i < len; i++) {
            var obj = {};
            obj.lblProvincal = { value: this.citys[i].provincial };
            obj.lblCapital = { value: this.citys[i].capital };
            array.push(obj);
        }
        this.setData({
            listctrl1: {
                list: {
                    page: this,
                    items: [
                        {
                            xml: 'Panels/safaPoint',
                            items: array
                        }
                    ]
                }
            }
        })

        /*-----------------------panel3--------------------*/
        var ctx = pm.createCanvasContext('Canvas1', this);
        drawCircle(ctx);
    },

    /* 此方法展示窗体后发生 */
    onResume: function (event) {

    },

    /* 当前页状态变化为显示时触发 */
    onShow: function (event) {

    },

    /* 当前页状态变化为隐藏时触发 */
    onHide: function (event) {

    },

    /* 此方法关闭窗体前发生 */
    onExit: function (event) {
        clearInterval(this.timer);
    },
};

Page(page);

page = 0;
